<div class="block">
  <span class="id">序号</span>
  <span class="span">图书编号</span>
  <span class="span">读者证件号</span>
  <span class="span">借阅日期</span>
  <span class="span1">预计归还日期</span>
  <span class="span">实际归还日期</span>
  <ul class="heroes">
    <li *ngFor="let hero of records">
      <span class="badge">{{hero.id}}</span>
      <span class="span">{{hero.bid}}</span>
      <span class="span">{{hero.pid}}</span>
      <span class="span">{{hero.bdate}}</span>
      <span class="span">{{hero.rdate}}</span>
      <span class="span">{{hero.realDate}}</span>
    </li>
  </ul>
</div>
<div class="blockSearch">
  <div class="imput">
    <input placeholder="图书编号" [(ngModel)]="bid" class="input"/>
  </div>
  <div class="imput">
    <input placeholder="读者证件号" [(ngModel)]="pid" class="input"/>
  </div>
  <div class="imput">
    <input placeholder="借阅日期" [(ngModel)]="bdate" class="input"/>
  </div>
  <div class="imput">
    <input placeholder="预计归还日期" [(ngModel)]="rdate" class="input"/>
  </div>
  <div class="imput">
    <input placeholder="实际归还日期" [(ngModel)]="realDate" class="input"/>
  </div>
  <button (click)="onSubmit()">查 询</button>
</div>
